<template>
  <div class="nav-bar" :style="navBarStyle" :class="navClass">
    <div class="nav-head flex flex-space" :style="navStyle">
      <div class="nav-back flex flex-start" @click.stop="handleBack">
        <img v-if="isCustom && !scrolled" class="back-icon" src="@/assets/images/arrow_left2.png" />
        <img v-else class="back-icon" src="@/assets/images/arrow_left1.png" />
        <div v-if="backText" class="back-text">{{ backText }}</div>
      </div>

      <div class="nav-title">{{ props.title || '' }}</div>
      <div class="nav-more flex flex-end" @click.stop="handleRefresh">
        <img v-if="isCustom && !scrolled" class="nav-icon" src="@/assets/images/nav_refresh1.png" />
        <img v-else class="nav-icon" src="@/assets/images/nav_refresh2.png" />
      </div>
    </div>
    <div v-if="!props.isCustom" class="nav-pane"></div>
  </div>
</template>
<script setup lang="ts">
import { throttle } from '@/utils/utils'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'

interface NavBarProps {
  title?: string
  height?: number
  showBack?: boolean
  backText?: string
  isCustom?: boolean
}
const props = withDefaults(defineProps<NavBarProps>(), {
  height: 44,
  title: '',
  backText: '',
  showBack: true,
  isCustom: false,
})
const scrolled = ref(false)
const navClass = computed(() => {
  if (props.isCustom) {
    return scrolled.value ? 'nav-bar-custom nav-bar-custom-scrolled' : 'nav-bar-custom'
  }
  return ''
})
const navBarStyle = computed(() => {
  if (props.height) {
    return `height: ${props.height}px`
  }
  return `height: 44px`
})
const navStyle = computed(() => {
  if (props.height) {
    return `height: ${props.height}px`
  }
  return `height: 44px`
})
const emit = defineEmits<{
  (e: 'on-back', value: string): void
  (e: 'on-refresh', value: string): void
}>()
const handleBack = () => {
  emit('on-back', '')
}
const handleRefresh = () => {
  emit('on-refresh', '')
}
const handleScroll = () => {
  if (!props.isCustom) {
    return
  }
  if (window.scrollY > props.height) {
    scrolled.value = true
  } else {
    scrolled.value = false
  }
}
const throttledScroll = throttle(handleScroll, 100)
const setUp = () => {
  if (props.isCustom) {
    window.addEventListener('scroll', throttledScroll)
  }
}
const setDown = () => {
  if (props.isCustom) {
    window.removeEventListener('scroll', throttledScroll)
  }
}
onMounted(() => {
  setUp()
})
onBeforeUnmount(() => {
  setDown()
})
</script>
<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  height: 64px;
  // background: #fff;
}

.nav-head {
  width: 100%;
  height: 44px;
  padding: 0 22px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 999;
  background: #fff;
}
.nav-pane {
  width: 100%;
  height: 100%;
}
.nav-title {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.nav-back,
.nav-more {
  width: 100px;
  min-height: 1px;
}
.back-icon {
  width: 16px;
}
.back-text {
  color: #333;
  font-size: 13px;
  margin-left: 4px;
}
.nav-icon {
  width: 18px;
}
.nav-bar-custom {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 999;
  .nav-head {
    background: transparent;
    .nav-title {
      color: #fff;
    }
  }
}
.nav-bar-custom-scrolled {
  .nav-head {
    background: #fff;
    .nav-title {
      color: #000;
    }
  }
}
</style>
